<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { reactive, computed,ref,onMounted,watch,unref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { Edit } from '@element-plus/icons-vue'
import type { ElForm } from 'element-plus'
import { ElMessage } from 'element-plus'
import { BaseButton } from '@/components/Button'
import { mountAdd,mountEdit,mountFindDeail} from '@/api/resource-manage'
import { baseOpions,otherOpions,setpOpions,getType,getSeriesType} from './config/info'


// 路由
const router = useRouter()
const { query } = useRoute()

const formSize = ref('default')
const elFormRef = ref<ComponentRef<typeof ElForm>>()
const mountRef = ref<ComponentRef<typeof ElForm>>()


// 关联表单
const otherFormShow =ref(false)
// 操作记录
const setpsShow =ref(true)
// 云台参数
const setpActive = ref(0)

// 接口数据详情
let apiObj = ref<T>({})


let infoType =  computed(() => {
  return  query?.type ?? 'add'
})

// 基础信息
const formObj =  computed(() => {
    return {
      ...baseOpions
    }
})

// 表单参数
const modalForm  = computed(() => {
  if(infoType.value!=='add'){
    return reactive( {
      code: apiObj.value.code, // 挂载编号
      type:apiObj.value.type, // 挂载类型
      brand:apiObj.value.brand, // 挂载品牌 drone_DJ 大疆  drone_TH 拓恒
      series:apiObj.value.series, // 挂载系列 
      status:apiObj.value.status, // 可用状态  0 停用 1 可用  2报废
      factoryCode:apiObj.value.factoryCode, // 原厂编号
      id:apiObj.value.id
    })
  }else{
    return reactive(  {
      ...formObj.value.modalForm
    })
  }
})

// 品牌
watch(
  () => modalForm.value.brand,
  (value, oldValue) => {
    console.log('品牌',value, oldValue)
    if(value){
      getSeriesType(value)
    }else{
     modalForm.value.series = null
    }
  },
  {
    immediate:true
  }
)

// 挂载类型 是否是相机
watch(()=> modalForm.value.type,
(value, oldValue) => {
    console.log('品牌',value, oldValue)
    if(value==='camera'){
      otherFormShow.value =true
    }else{
      otherFormShow.value =false
    }
  },
)



// 云台参数
const mountForm =  computed(() => {
  return {
     ...otherOpions,

  }
})

// 云台参数 表单参数
const mountModalForm =  computed(() => {
  if(infoType.value!=='add'){
    return reactive( {
      pitchRange_start:apiObj.value.pitchRange_start,
      pitchRange_end:apiObj.value.pitchRange_end,
      translationRange_start:apiObj.value.translationRange_start,
      translationRange_end:apiObj.value.translationRange_end,
      rollRange_start:apiObj.value.rollRange_start,
      rollRange_end:apiObj.value.rollRange_end,
      pullUrl:apiObj.value.pullUrl,
      pushUrl:apiObj.value.pushUrl,
    })
  }else{
    return  reactive(  {
      ...mountForm.value.modalForm
    })
  }
})


// 操作记录
const setps =  computed(() => {
  return {
     ...setpOpions
  }
})

// 确认
const submit = async (formEl) => {
  if (!formEl) return
    const formElValid = await formEl.validate() 
    // 是否为相机
    const mountRefValid = modalForm.value.type==='camera'? await unref(mountRef).validate():true
    if(!!formElValid && !!mountRefValid){
       let  query = {
         ...modalForm.value
       }
      //  是否相机
       if( otherFormShow.value){
        const pitchRange = mountModalForm.value.pitchRange_start?mountModalForm.value.pitchRange_start + ',' + mountModalForm.value.pitchRange_end:''
        const translationRange = mountModalForm.value.translationRange_start? mountModalForm.value.translationRange_start + ',' + mountModalForm.value.translationRange_end:''
        const rollRange = mountModalForm.value.rollRange_start?mountModalForm.value.rollRange_start + ',' + mountModalForm.value.rollRange_end:''
        let mountObj= {
          pitchRange,
          translationRange,
          rollRange,
          pullUrl:mountModalForm.value.pullUrl,
          pushUrl:mountModalForm.value.pushUrl,
        }
        query = Object.assign({},query,mountObj)
       }

       console.log('最终传参',query)
       //新增
       if(infoType.value==='add'){
        const {msg} =  await mountAdd(query) as any
        ElMessage.success(msg)
       }else{ // 编辑
        const {msg} =  await mountEdit(query) as any
        ElMessage.success(msg)
       }
       returnLinK()
    }
  }


// 返回
const returnLinK = () => {
  router.go(-1)
}

// 获取详情
const getMountFindDeail  = async function (mountId) {
  const {data} = await mountFindDeail({mountId}) as any
    const pitchRange= data.pitchRange? data.pitchRange.split(','):[]
    const translationRange= data.pitchRange? data.pitchRange.split(','):[]
    const rollRange= data.pitchRange? data.pitchRange.split(','):[]
    data.pitchRange_start = pitchRange[0]
    data.pitchRange_end = pitchRange[1]
    data.translationRange_start = translationRange[0]
    data.translationRange_end = pitchRange[1]
    data.rollRange_start = rollRange[0]
    data.rollRange_end = rollRange[1]
    apiObj.value  = {...data}
}

// 载入
onMounted(()=>{
    init()
})

// 载入
const  init =   ()=>{
  getType()
  if(infoType.value!=='add'){
      getMountFindDeail(query?.id)
  }
}



</script>

<template>
  <!--  基础信息 -->
  <ContentWrap :title="`基础信息`" style="margin-bottom: 20px">
    <el-form
      ref="elFormRef"
      :model="modalForm"
      :rules="formObj.modalRules"
      label-width="120px"
      :size="formSize"
      status-icon
      :disabled="infoType==='detail'"
    >
      <el-row :gutter="10">
        <el-col
          v-for="(formItem, index) in formObj.formItem"
          :key="index"
          v-bind="formItem.row"
        >
          <el-form-item  :label="formItem.label" :prop="formItem.key">
            <el-input
              v-if="formItem.type === 'input'"
              v-model="modalForm[formItem.key]"
              v-bind="formItem.props"
            >
              <template v-if="formItem.key === 'scope'" #append>km</template>
            </el-input>
            <el-select
              v-if="formItem.type === 'select'"
              v-model="modalForm[formItem.key]"
              v-bind="formItem.props"
            >
              <el-option
                v-for="item in formItem.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ContentWrap>
  <!-- 云台参数 -->
  <ContentWrap :title="`云台参数`" style="margin-bottom: 20px" v-if="otherFormShow">
    <el-form
      ref="mountRef"
      :model="mountModalForm"
      :rules="mountForm.modalRules"
      label-width="120px"
      :size="formSize"
      :disabled="infoType==='detail'"
      status-icon
    >
      <el-row :gutter="10">
        <el-col v-bind="formItem.row"  v-for="(formItem, index) in mountForm.formItem" :key="index">
          <el-form-item :label="formItem.label" :prop="formItem.key"  :class="formItem.type === 'double_input' && 'double_input_wrap'"> 
            <template v-if="formItem.type === 'input'">
              <el-input
                v-bind="formItem.props"
                v-model="mountModalForm[formItem.key]"
              />
            </template>
            <template v-else-if="formItem.type === 'double_input'">
              <el-input
                class="double_input"
                v-bind="formItem.props"
                v-model="mountModalForm[formItem.keys[0]]"
              >
              <template  #append><sup>°</sup></template>
              </el-input>
              <el-button :text="true">-</el-button>
              <el-input
                class="double_input"
                v-bind="formItem.props"
                v-model="mountModalForm[formItem.keys[1]]"
              >
              <template  #append><sup>°</sup></template>
              </el-input>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ContentWrap>
  <!-- 操作记录 -->
  <ContentWrap :title="`操作记录`" style="margin-bottom: 20px" v-if="setpsShow">
    <el-steps  :active="setpActive" align-center>
      <el-step v-for="(item,index) in setps" :key="index" :title="item.title" :description="item.description" >
        <template #icon>
          <span :class="item.icon" class="icon_span"></span>
        </template>
      </el-step>
    </el-steps>
  </ContentWrap>
  <el-row>
    <el-col :span="24">
      <BaseButton @click="returnLinK()">返回</BaseButton>
      <BaseButton v-if="infoType!=='detail'" type="primary" @click="submit(elFormRef)">确认</BaseButton>
    </el-col>
  </el-row>
</template>

<style lang="less" scoped>
.el-form-item__content {
  > div {
    width: 100%;
  }
}

.alone_row {
  display: flex;
  margin-right: 25px;
}

.double_input_wrap ::v-deep .el-form-item__content{
  justify-content: space-between;
  .double_input{
    width: 45%;
  }
}
</style>
